<!DOCTYPE html>
<html>
<head>
    <title>remove</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
    <link rel="stylesheet" href="../assets/examples.css">
    <script src="../assets/jquery.min.js"></script>
    <script src="../assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
    <script src="../assets/bootstrap-table/src/extensions/export/bootstrap-table-export.js"></script>
    <script src="//rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
    <script src="../ga.js"></script>
</head>
<body>
    <div class="container">
        <h1>remove</h1>
        <p>
            Remove data from table, the params contains two properties:<br>
            field: the field name of remove rows.<br>
            values: the array of values for rows which should be removed.<br>
            <code>$table.bootstrapTable('remove', {field: 'id', values: ids});</code>
        </p>
        <div id="toolbar">
            <button id="button" class="btn btn-default">remove</button>
        </div>
        <table id="table"
               data-toggle="table"
               data-toolbar="#toolbar"
               data-height="428"
               data-search="true"　
               data-show-columns="true"
               data-page-list="[10, 25, 50, 100, ALL]"
               data-pagination="true"
               data-pagination-first-text="First"
               data-pagination-pre-text="Previous"
               data-pagination-next-text="Next"
               data-pagination-last-text="Last"

               data-show-export="true"

               data-side-pagination="server"

               data-url="/json/data2.json">
            <thead>
            <tr>
                <th data-field="state" data-checkbox="true" >
                <th data-field="id" data-sortable="true">ID</th>
                <th data-field="name" data-sortable="true">Item Name</th>
                <th data-field="price" data-sortable="true">Item Price</th>
            </tr>
            </thead>
        </table>
    </div>
<script>
    var $table = $('#table'),
        $button = $('#button');
    //删除
    $(function () {
        $button.click(function () {

            //$table.bootstrapTable('getSelections')
            //得到所有选中的行的信息,bootstrapTable中封装的方法,getSelections方法名
            var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
                return row.id;
            });
            $table.bootstrapTable('remove', {
                field: 'id',
                values: ids
            });
        });
    });
    //

</script>
</body>
</html>